<template>
  <a-layout id="components-layout-demo-custom-trigger">
    <a-layout-sider v-model="collapsed" :trigger="null" collapsible>
      <div class="logo" />
      <a-menu theme="dark" mode="inline" :default-selected-keys="defaulted">
        <a-menu-item key="1">
          <a-icon type="user" />
          <span>用户管理</span>
          <router-link to="/ant_admin"></router-link>
        </a-menu-item>

        <a-menu-item key="2">
          <a-icon type="laptop" />
          <span>用户详情</span>
          <router-link to="/ant_details"></router-link>
        </a-menu-item>

        <a-menu-item key="3">
          <a-icon type="upload" />
          <span>权限管理</span>
          <router-link to="/permission"></router-link>
        </a-menu-item>

        <a-menu-item key="4">
          <a-icon type="notification" />
          <span>OA审批</span>
          <router-link to="/work_order"></router-link>
        </a-menu-item>

        <a-menu-item key="5">
          <a-icon type="notification" />
          <span>工单管理</span>
          <router-link to="/work_admin"></router-link>
        </a-menu-item>

        <a-menu-item key="6">
          <a-icon type="notification" />
          <span>我的工单</span>
          <router-link to="/mywork"></router-link>
        </a-menu-item>

        <a-menu-item key="7" v-if="this.uid == 4 | this.uid==7 | this.uid==10">
          <a-icon type="notification" />
          <span>待审核</span>

          <!-- 消息提示 -->
          <a-badge :count="num">
              <a href="#" class="head-example" />
          </a-badge>

          <router-link to="/check_pending"></router-link>
        </a-menu-item>

      </a-menu>
    </a-layout-sider>

    <a-layout>
      <a-layout-header style="background: #fff; padding: 0">
        <a-icon
          class="trigger"
          :type="collapsed ? 'menu-unfold' : 'menu-fold'"
          @click="() => (collapsed = !collapsed)"
        />
      </a-layout-header>

      <a-layout-content
        :style="{ margin: '24px 16px', padding: '24px', background: '#fff', minHeight: '280px' }"
      >
        <router-view></router-view>
        
        <!-- <ant_admin @pro_fu="get_info" /> -->

        <!-- <div>
            <a-button class="editable-add-btn" @click="handleAdd">
            Add
            </a-button>
            <a-table bordered :data-source="dataSource" :columns="columns">
            <template slot="name" slot-scope="text, record">
                <editable-cell :text="text" @change="onCellChange(record.key, 'name', $event)" />
            </template>
            <template slot="operation" slot-scope="text, record">
                <a-popconfirm
                v-if="dataSource.length"
                title="Sure to delete?"
                @confirm="() => onDelete(record.key)"
                >
                <a href="javascript:;">Delete</a>
                </a-popconfirm>
            </template>
            </a-table>
        </div> -->

      </a-layout-content>

    </a-layout>
  </a-layout>
</template>

<script>
const EditableCell = {
  template: `
      <div class="editable-cell">
        <div v-if="editable" class="editable-cell-input-wrapper">
          <a-input :value="value" @change="handleChange" @pressEnter="check" /><a-icon
            type="check"
            class="editable-cell-icon-check"
            @click="check"
          />
        </div>
        <div v-else class="editable-cell-text-wrapper">
          {{ value || ' ' }}
          <a-icon type="edit" class="editable-cell-icon" @click="edit" />
        </div>
      </div>
    `,
  props: {
    text: String,
  },
  data() {
    return {
      value: this.text,
      editable: false,
    };
  },
  methods: {
    handleChange(e) {
      const value = e.target.value;
      this.value = value;
    },
    check() {
      this.editable = false;
      this.$emit('change', this.value);
    },
    edit() {
      this.editable = true;
    },
  },
};

import ant_admin from './ant_admin'

export default {

components: {
    EditableCell,
},

  data() {
    return {
      collapsed: false,
      data_2:'',
      defaulted: [this.data_2 + ''],
      uid:localStorage.getItem('uid'),
      num:'0',
      

      dataSource: [
        {
          key: '0',
          name: 'Edward King 0',
          age: '32',
          address: 'London, Park Lane no. 0',
        },
        {
          key: '1',
          name: 'Edward King 1',
          age: '32',
          address: 'London, Park Lane no. 1',
        },
      ],
      count: 2,
      columns: [
        {
          title: '用户名',
          dataIndex: 'name',
          width: '30%',
          scopedSlots: { customRender: 'name' },
        },
        {
          title: '年龄',
          dataIndex: 'age',
        },
        {
          title: '地址',
          dataIndex: 'address',
        },
        {
          title: '操作',
          dataIndex: 'operation',
          scopedSlots: { customRender: 'operation' },
        },
      ],
    };
  },

  components:{
    ant_admin,
  },

mounted:function(){
    this.axios.get("http://localhost:8000/message/").then(res=>{
      console.log(res.data)
      this.num = res.data.count
    })
},

methods: {
    onCellChange(key, dataIndex, value) {
      const dataSource = [...this.dataSource];
      const target = dataSource.find(item => item.key === key);
      if (target) {
        target[dataIndex] = value;
        this.dataSource = dataSource;
      }
    },
    onDelete(key) {
      const dataSource = [...this.dataSource];
      this.dataSource = dataSource.filter(item => item.key !== key);
    },
    handleAdd() {
      const { count, dataSource } = this;
      const newData = {
        key: count,
        name: `Edward King ${count}`,
        age: 32,
        address: `London, Park Lane no. ${count}`,
      };
      this.dataSource = [...dataSource, newData];
      this.count = count + 1;
    },

    get_info(val){
        // console.log(val)
        this.data_2 = val
        console.log(this.data_2)
    }

  },

};
</script>
<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

.editable-cell {
  position: relative;
}

.editable-cell-input-wrapper,
.editable-cell-text-wrapper {
  padding-right: 24px;
}

.editable-cell-text-wrapper {
  padding: 5px 24px 5px 5px;
}

.editable-cell-icon,
.editable-cell-icon-check {
  position: absolute;
  right: 0;
  width: 20px;
  cursor: pointer;
}

.editable-cell-icon {
  line-height: 18px;
  display: none;
}

.editable-cell-icon-check {
  line-height: 28px;
}

.editable-cell:hover .editable-cell-icon {
  display: inline-block;
}

.editable-cell-icon:hover,
.editable-cell-icon-check:hover {
  color: #108ee9;
}

.editable-add-btn {
  margin-bottom: 8px;
}

</style>
